<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学习</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <script src="/resources/js/jquery.min.js"></script>

    <style type="text/css">
    html,body{
        height: 100%;
    }
    .active{
        background-color:#dddddd;
        color:red; 
    }
    </style>

</head>

<body>
<!-- 顶部 -->
    <%--<div style="background-color:#82a6f5;">--%>
        <%--<span style="line-height:50px;font-size:16px;position:absolute;left:45%;color:white;">学习中心</span>--%>
    <%--</div>--%>
<!-- 中间 -->
    <div style="width:100%;height:92%;overflow:auto;">
        <a href="${sessionScope.activeurl.url}" style="align-content: center">
            <c:choose>
                <c:when test="${vipTryFalse=='nu'}">
                    未激活不能观看,点击激活
                </c:when>
            </c:choose>
        </a>
        <a href="#" style="display:none;"  id="vipTryFalse"></a>
        <c:forEach items="${pageInfo.list}" var="a">
        <table  width="100%" onclick="video_play(${a.rebinId},'${vipTryFalse}','${sessionScope.activeurl.url}')">
            <!-- 显示开始-->
                <tr>
                    <td rowspan="2" style="width:15%;">
                        <img src="/resources/img/111.jpg" alt="图片" style="width:100%;">
                    </td>
                    <td>
                        <span style="position:relative;top:0;left:0;">${a.rebinName}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="margin:auto;">${a.rebinInstruct}</span>
                    </td>
                </tr>
        </table>
        <hr/>
        </c:forEach>
        <!-- 分页开始  //////  进入首页时  -->
        <div class="am-u-lg-12 am-cf content_pageinfor" id="div1">
            <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
            <ul class="content_pageinfor_ul">
                当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
            </ul>
            <div class="am-fr" id="lik_id">
                <ul class="am-pagination tpl-pagination content_pageinfor_ul">
                    <!-- 首页 -->
                    <li><a href="/s/study?posion=1">首页</a></li>
                    <!-- 上一页 -->
                    <c:if test="${pageInfo.hasPreviousPage }">
                        <li>
                            <a href="/s/study?posion=${pageInfo.pageNum-1 }" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <!-- 循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接 -->
                    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                        <c:if test="${page_Num == pageInfo.pageNum }">
                            <li class="am-active"><a href="/s/study?posion=${page_Num }">${page_Num }</a></li>
                        </c:if>
                        <c:if test="${page_Num != pageInfo.pageNum }">
                            <li><a href="/s/study?posion=${page_Num }">${page_Num }</a></li>
                        </c:if>
                    </c:forEach>
                    <!-- 下一页 -->
                    <c:if test="${pageInfo.hasNextPage }">
                        <li>
                            <a href="/s/study?posion=${pageInfo.pageNum+1 }" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <!-- 末页 -->
                    <li><a href="/s/study?posion=${pageInfo.pages }">末页</a></li>
                </ul>
            </div>
        </div>
        <!-----------分页面结束-------->
    </div>
<!-- 底部 -->
    <div class="am-g" style="background-color:rgba(255,255,255,0);border-color:#dddddd;height:8%;">

                <div id="company" class="am-u-sm-3" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">公司</b></a>
                </div>
        <div id="news" class="am-u-sm-3" style="height:100%;border-radius:10px;">
            <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">新闻</b></a>
        </div>
        <div id="stud" class="am-u-sm-3 active" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;;"><b style="margin-left:30%;">学习</b></a>
                </div>
                <div id="content" class="am-u-sm-3" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">我的</b></a>
                </div>
                <%--<div id="news" class="am-u-sm-3" style="height:100%;border-radius:10px;">--%>
                    <%--<a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">预留</b></a>--%>
                <%--</div>        --%>
        </div>
    <script>
        $(document).ready(function(e){
            $("#company").click(function(){
                $(this).find("a").attr("href",'/index');
            });
            $("#stud").click(function(){
                $(this).find("a").attr("href",'#');
            });
            $("#content").click(function(){
                $(this).find("a").attr("href",'/c/centre');
            });
            $("#news").click(function(){
                $(this).find("a").attr("href",'/res/reserved');
            });
        })
        function video_play(rebinId,vipTryFalse,url) {
            if (vipTryFalse==false){
                var vipTryFalse=document.getElementById("vipTryFalse");
                vipTryFalse.innerHTML="未激活不能观看,点击激活";
                vipTryFalse.style.color="red";
                vipTryFalse.style.display="block";
                vipTryFalse.setAttribute("href",url);
            }else {
                window.location.href="/listvoid/list?rebinId="+rebinId;
            }
        }
    </script>
</body>

</html>
